<template>
	<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']" @touchmove.stop.prevent="clear">
		<view @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" class="uni-popup__mask"
			:class="[maskClass]" :style="{ backgroundColor: maskBackgroundColor }" @click="onTap" />
		<view class="uni-popup__wrapper" :class="[popupstyle]" :style="{ backgroundColor: bg }">
			<slot />
		</view>
	</view>
</template>

<script>
export default {
	name: 'uniPopup',
	props: {
		// 开启动画
		animation: {
			type: Boolean,
			default: true
		},
		// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
		type: {
			type: String,
			default: 'center'
		},
		// maskClick
		maskClick: {
			type: Boolean,
			default: true
		},
		backgroundColor: {
			type: String,
			default: 'none'
		},
		safeArea: {
			type: Boolean,
			default: true
		},
		maskBackgroundColor: {
			type: String,
			default: 'rgba(0, 0, 0, 0.4)'
		},
	},
	data() {
		return {
			showPopup: false,
			popupWidth: 0,
			popupHeight: 0,
			isDesktop: false,
			maskClass: {
				'position': 'fixed',
				'bottom': 0,
				'top': 0,
				'left': 0,
				'right': 0,
				'backgroundColor': 'rgba(0, 0, 0, 0.4)'
			},
			transClass: {
				'position': 'fixed',
				'left': 0,
				'right': 0,
			}
		}
	},
	computed: {
		bg() {
			return this.backgroundColor
		},
		popupstyle() {
			return this.type
		}
	},
	created() {
		this.mkclick = true
		if (this.isMaskClick === undefined) {
			this.mkclick = true
		} else {
			this.mkclick = this.maskClick
		}
		this.animation = this.animation || true
	},
	methods: {
		clear(e) {
			e.stopPropagation()
		},
		open() {
			this.showPopup = true
		},
		close() {
			this.showPopup = false
		},
		onTap() {
			if (!this.mkclick) return
			this.close()
		},
		touchstart() {},
		touchmove() {},
		touchend() {}
	}
}
</script>

<style>
.uni-popup {
	position: fixed;
	z-index: 99;
}

.uni-popup__mask {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0;
}

.uni-popup__wrapper {
	position: fixed;
}

.uni-popup.center .uni-popup__wrapper {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style> 